<template>
  <wd-navbar title="问诊记录" left-text="" left-arrow @click-left="handleClickLeft"></wd-navbar>
  <wd-tabs v-model="tab">
    <block v-for="item in tabs" :key="item">
      <wd-tab :title="`${item.title}`">
        <!-- 循环内容 -->
        <view class="content">
          <view v-for="v in item.data" :key="v.price" class="contentBox">
            <view class="contentBox_top">
              <view style="display: flex">
                <!-- 灰色圆圈 -->
                <view
                  style="width: 40rpx; height: 40rpx; background-color: #c4c4c4; border-radius: 50%"
                ></view>
                <text style="margin-left: 20rpx; font-size: 30rpx; font-weight: 600">
                  急速问诊（自动分配医生）
                </text>
              </view>
              <text
                :style="
                  v.state === '待支付'
                    ? 'font-weight: 600; font-size: 26rpx; color: #f2994a'
                    : 'font-weight: 600; font-size: 26rpx; color: #979797'
                "
              >
                {{ v.state }}
              </text>
            </view>
            <view class="contentBox_center">
              <view>
                <text style="font-size: 26rpx; color: #c3c3c5">病情描述</text>
                <text style="margin-left: 30rpx; font-size: 26rpx; color: #121826">
                  {{ v.description }}
                </text>
              </view>
              <view style="margin-top: 14rpx">
                <text style="font-size: 26rpx; color: #c3c3c5">价格</text>
                <text style="margin-left: 82rpx; font-size: 26rpx; color: #121826">
                  {{ v.price }}
                </text>
              </view>
              <view style="margin-top: 30rpx">
                <text style="font-size: 26rpx; color: #c3c3c5">创建时间</text>
                <text style="margin-left: 30rpx; font-size: 26rpx; color: #121826">
                  {{ v.time }}
                </text>
              </view>
            </view>
            <view class="contentBox_bottom">
              <button
                style="
                  width: 164rpx;
                  height: 59rpx;
                  font-size: 25rpx;
                  line-height: 50rpx;
                  color: #3c3e42;
                  background: #fafafa;
                  border: 1px solid #ededede5;
                  border-radius: 55px;
                "
              >
                取消问诊
              </button>
              <button
                style="
                  width: 164rpx;
                  height: 59rpx;
                  font-size: 25rpx;
                  line-height: 50rpx;
                  color: #16c2a3;
                  background: #fafafa;
                  border: 2px solid #16cca3;
                  border-radius: 55px;
                "
              >
                继续沟通
              </button>
            </view>
          </view>
        </view>
      </wd-tab>
    </block>
  </wd-tabs>
</template>

<script setup lang="ts">
function handleClickLeft() {
  uni.navigateBack();
}
const tab = ref<number>(0);
const tabs = ref([
  {
    id: 1,
    title: "问医生",
    data: [
      {
        state: "待支付",
        description: "腹痛腹泻 胃部有些许痉挛",
        price: "￥ 39.00",
        time: "2019-07-08 09:55:54",
      },
      {
        state: "待接诊",
        description: "腹痛腹泻 胃部有些许痉挛",
        price: "￥ 39.00",
        time: "2019-07-08 09:55:54",
      },
      {
        state: "咨询中",
        description: "腹痛腹泻 胃部有些许痉挛",
        price: "￥ 39.00",
        time: "2019-07-08 09:55:54",
      },
      {
        state: "已完成",
        description: "腹痛腹泻 胃部有些许痉挛",
        price: "￥ 39.00",
        time: "2019-07-08 09:55:54",
      },
      {
        state: "已取消",
        description: "腹痛腹泻 胃部有些许痉挛",
        price: "￥ 39.00",
        time: "2019-07-08 09:55:54",
      },
    ],
  },
  {
    id: 2,
    title: "急速问诊",
    data: [
      {
        state: "待支付",
        description: "腹痛腹泻 胃部有些许痉挛",
        price: "￥ 39.00",
        time: "2019-07-08 09:55:54",
      },
      {
        state: "待接诊",
        description: "腹痛腹泻 胃部有些许痉挛",
        price: "￥ 39.00",
        time: "2019-07-08 09:55:54",
      },
      {
        state: "咨询中",
        description: "腹痛腹泻 胃部有些许痉挛",
        price: "￥ 39.00",
        time: "2019-07-08 09:55:54",
      },
      {
        state: "已完成",
        description: "腹痛腹泻 胃部有些许痉挛",
        price: "￥ 39.00",
        time: "2019-07-08 09:55:54",
      },
      {
        state: "已取消",
        description: "腹痛腹泻 胃部有些许痉挛",
        price: "￥ 39.00",
        time: "2019-07-08 09:55:54",
      },
    ],
  },
  {
    id: 3,
    title: "开药问诊",
    data: [
      {
        state: "待接诊",
        description: "腹痛腹泻 胃部有些许痉挛",
        price: "￥ 39.00",
        time: "2019-07-08 09:55:54",
      },
      {
        state: "已完成",
        description: "腹痛腹泻 胃部有些许痉挛",
        price: "￥ 39.00",
        time: "2019-07-08 09:55:54",
      },
      {
        state: "已取消",
        description: "腹痛腹泻 胃部有些许痉挛",
        price: "￥ 39.00",
        time: "2019-07-08 09:55:54",
      },
      {
        state: "咨询中",
        description: "腹痛腹泻 胃部有些许痉挛",
        price: "￥ 39.00",
        time: "2019-07-08 09:55:54",
      },
    ],
  },
]);
</script>

<style scoped>
.content {
  margin-right: 30rpx;
  margin-left: 30rpx;
}
.contentBox {
  width: 690rpx;
  height: 414rpx;
  margin: 0 auto;
  margin-top: 20rpx;
}
.contentBox_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40rpx;
}
.contentBox_center {
  margin-top: 60rpx;
}
.contentBox_bottom {
  display: flex;
  margin-top: 40rpx;
  margin-left: 338rpx;
}
</style>
